<!DOCTYPE html>
<html lang="zh-CN">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作日志列表2</title>
        <!--引用css/bootstrap.min.css -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/vue.global.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>
    <script src="{% static 'js/pagination.js' %}"></script>
   
    <style>
        .table th, .table td { vertical-align: middle; }
        .pagination .page-link { min-width: 36px; text-align: center; }
        .pagination-summary { margin-top: 16px; color: #888; }
        .search-bar input, .search-bar select { min-width: 120px; margin-right: 8px; }
        .search-bar { margin-bottom: 16px; }
        .pagination-bar {
            font-size: 13px;
        }
        .pagination-sm .page-link {
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            border-radius: 4px !important;
            margin: 0 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .pagination-sm .active .page-link {
            background: #1677ff;
            color: #fff;
            border-color: #1677ff;
        }
        .form-select-sm, .form-control-sm {
            font-size: 13px;
            height: 32px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
{% verbatim %}
<div id="app" class="container-fluid mt-4">
    <div class="card">
        <div class="card-body">
            <!-- 搜索栏 -->
            <form class="row search-bar align-items-center g-2 mb-3">
                <div class="col-auto">
                    <input type="text" class="form-control" placeholder="用户名" >
                </div>
                <div class="col-auto">
                    <select class="form-select">
                        <option value="">状态</option>
                        <option value="成功">成功</option>
                        <option value="失败">失败</option>
                    </select>
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-primary">查 询</button>
                </div>
            </form>
            <!-- 表格 -->
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th><input type="checkbox"></th>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>登录地址</th>
                            <th>登录地点</th>
                            <th>浏览器</th>
                            <th>操作系统</th>
                            <th>登录标签</th>
                            <th>操作信息</th>
                            <th>登录状态</th>
                            <th>登录日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in pageInfo.items" :key="item.id">
                            <td><input type="checkbox" :value="item.id"></td>
                            <td>{{ item.id }}</td>
                            <td>{{ item.user_name }}</td>
                            <td>{{ item.login_ip }}</td>
                            <td>{{ item.login_location }}</td>
                            <td>{{ item.browser }}</td>
                            <td>{{ item.os }}</td>
                            <td>{{ item.login_tag }}</td>
                            <td>{{ item.operate_info }}</td>
                            <td>
                                <span :class="['badge', item.status === 'success' ? 'bg-success' : 'bg-danger']">{{ item.status }}</span>
                            </td>
                            <td>{{ item.login_date }}</td>
                            <td><a href="#" class="text-primary">详情</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页部分抽为组件 -->
            <Page :page-info="pageInfo" @change="onPageChange1"></Page>
        </div>
    </div>
</div>

<script>
const { createApp, ref, computed, watch, onMounted, reactive } = Vue;

const app=createApp({
    setup() {
        // 定义pageInfo对象
        const pageInfo=reactive({
            page:1,
            page_size:10,
            total:0,
            total_pages:0,
            items:[],
            current_page:1,
            goto_page:1,
        });

        /**查询日志列表数据
         * @param start
         * @param page_size
         * @param paramStr
        */
        const query_log_list=(start=1,page_size=10,paramStr='')=>{
            axios({
                method: 'get',
                url: '/blog/api/user/operate_log/?page='+start+'&page_size='+page_size+'&'+paramStr,
            }).then(res => {
                if (res.data.code === 0) {
                    // 封装pageInfo对象
                    pageInfo.items = res.data.result.data;
                    pageInfo.total = res.data.result.total;
                    pageInfo.total_pages = res.data.result.total_pages;
                    pageInfo.page_size = res.data.result.page_size;
                    pageInfo.page= res.data.result.page;
                    pageInfo.current_page = res.data.result.page;
                }
            }).catch(err => {
                console.log(err);
            })
        }

        // 分页变化时的处理
        function onPageChange1(newPageInfo) {
            pageInfo.current_page = newPageInfo.current_page;
            pageInfo.page_size = newPageInfo.page_size;
            query_log_list(pageInfo.current_page, pageInfo.page_size);
        }

        onMounted(() => {
           query_log_list();
        });

        return {
            pageInfo,
            onPageChange1
        };
    }
});
app.component('Page', window.Page);
app.mount('#app');
</script>
</body>
{% endverbatim %}
</html>